<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>社保计算器</title>
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="css/bootstrap.min.css">
	    <script>
	    	//javaScript代码
	    	function calc(){
	    		//1.从文本框取工资
	    		salary = $("#sal").val(); //"6000"字符串
	    		salnum = parseInt(salary); //把字符串"6000"变为6000
	    		
	    		//2.计算
	    		ylgr = salnum * 0.08; //个人缴纳的养老保险
	    		ylgs = salnum * 0.2; //公司缴纳的养老保险
	    		
	    		ybgr = salnum * 0.02;//个人缴纳的医疗保险
	    		ybgs = salnum * 0.06;//公司缴纳的医疗保险
	    		
	    		sygr = salnum * 0.005;//个人缴纳的失业保险
	    		sygs = salnum * 0.015;//公司缴纳的失业保险
	    		
	    		gsgs = salnum * 0.005;//公司缴纳的工伤保险
	    		
	    		syugs = salnum * 0.008;//公司缴纳的生育保险
	    		
	    		gjjgr = salnum * 0.12;//个人缴纳的公积金
	    		gjjgs = salnum * 0.12;//公司缴纳的公积金
	    		
	    		hjgr = ylgr + ybgr + sygr + gjjgr;//个人合计
	    		hjgs = ylgs + ybgs + sygs + gsgs + syugs +gjjgs;//公司合计
	    		
	    		ze = hjgr + hjgs;
	    		//3.把计算结果放到单元格里
	    		$("#ylgr").html(ylgr);
	    		$("#ylgs").html(ylgs);
	    		
	    		$("#ybgr").html(ybgr);
	    		$("#ybgs").html(ybgs);
	    		
	    		$("#sygr").html(sygr);
	    		$("#sygs").html(sygs);
	    		
	    		$("#gsgr").html(gsgr);
	    		$("#gsgs").html(gsgs);
	    		
	    		$("#syugr").html(syugr);
	    		$("#syugs").html(syugs);
	    		
	    		$("#gjjgr").html(gjjgr);
	    		$("#gjjgs").html(gjjgs);
	    		
	    		$("#hjgr").html(hjgr);
	    		$("#hjgs").html(hjgs);
	    		
	    		$("#ze").html(ze);
	    	}
	    </script>
	</head>
	<body>
		<!--
			表格是table,行是tr,列是td
		-->
		<table class = "table table-bordered">
			<tr class = "text-center">
				<td>工资</td>
				<td colspan="3"> 
				    <input class="form-control" placeholder="请输入个人工资" type="text" id="sal">
				</td>
				<td>
					<button onclick="calc()" class="btn btn-danger btn-block">计算</button>
				</td>
			</tr>
			<tr class="text-center bg-primary">
				<td>险种</td>
				<td>个人%</td>
				<td>个人</td>
				<td>公司%</td>
				<td>公司</td>
			</tr>
			<tr class="text-center">
				<td>养老</td>
				<td>8%</td>
				<td id="ylgr"></td>
				<td>20%</td>
				<td id="ylgs"></td>
			</tr>
			<tr class="text-center">
				<td>医保</td>
				<td>2%</td>
				<td id="ybgr"></td>
				<td>6%</td>
				<td id="ybgs"></td>
			</tr>
			<tr class="text-center">
				<td>失业</td>
				<td>0.5%</td>
				<td id="sygr"></td>
				<td>1.5%</td>
				<td id="sygs"></td>
			</tr>
			<tr class="text-center">
				<td>工伤</td>
				<td></td>
				<td id="gsgr"></td>
				<td>0.5%</td>
				<td id="gsgs"></td>
			</tr>
			<tr class="text-center">
				<td>生育</td>
				<td></td>
				<td id="syugr"></td>
				<td>0.8%</td>
				<td id="syugs"></td>
			</tr>
			<tr class="text-center">
				<td>公积金</td>
				<td>12%</td>
				<td id="gjjgr"></td>
				<td>12%</td>
				<td id="gjjgs"></td>
			</tr>
			<tr class="text-center">
				<td>合计</td>
				<td>个人合计</td>
				<td id="hjgr"></td>
				<td>公司合计</td>
				<td id="hjgs"></td>
			</tr>
			<tr class="text-center">
				<td>总额</td>
				<td colspan="4" id = "ze"></td>
			</tr>
		</table>
	</body>
</html>
